Skip to content

fix(weekly-view): correct time slot offset and clipped slots#28786

Draft
Akhilesh-Varute wants to merge 2 commits intocalcom:mainfrom
Akhilesh-Varute:fix/weekly-view-timeslot-offset
Draft

fix(weekly-view): correct time slot offset and clipped slots#28786
Akhilesh-Varute wants to merge 2 commits intocalcom:mainfrom
Akhilesh-Varute:fix/weekly-view-timeslot-offset

Conversation

@Akhilesh-Varute
Copy link
Copy Markdown

@Akhilesh-Varute Akhilesh-Varute commented Apr 8, 2026 •
edited
Loading

What does this PR do?

Fixes two layout bugs in the weekly calendar view.

  • Fix SchedulerColumns marginTop fallback from var(--gridDefaultSize) (58px) to var(--calendar-offset-top) (28px) so the event grid aligns correctly with time labels on first render
  • Fix falsy check for topOffsetMinutes === 0 in Cell and CustomCell so slots at the start hour are correctly positioned with absolute + top: 0

Fixes #14208

Visual Demo

Before: Time slots are offset from the time labels on the left, and end-hour slots get clipped (as shown in the issue screenshots).

After: Slots align correctly with time labels and no slots are clipped.

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox. N/A
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

  1. Go to any booker page (e.g. /alan)
  2. Switch to Weekly view
  3. Verify that time slots align correctly with the hour labels on the left
  4. Verify that all slots within an hour are visible (not clipped)
  5. Test with a timezone behind UTC (e.g. Pacific TZ -07) where the bug was most reproducible

No environment variables needed. A standard cal.com local setup is sufficient.

@akhil-ecc
fix(weekly-view): correct time slot offset and clipped slots
c6f7124 
- Fix SchedulerColumns marginTop fallback from var(--gridDefaultSize) (58px)
  to var(--calendar-offset-top) (28px) so the event grid aligns correctly
  with time labels on first render
- Fix falsy check for topOffsetMinutes === 0 in Cell and CustomCell so slots
  at the start hour are correctly positioned with absolute + top: 0

Fixes calcom#14208
@CLAassistant
Copy link
Copy Markdown

CLAassistant commented Apr 8, 2026 •
edited
Loading

CLA assistant check
All committers have signed the CLA.

@github-actions github-actions bot added booking-page area: booking page, public booking page, booker Medium priority Created by Linear-GitHub Sync ui area: UI, frontend, button, form, input 🐛 bug Something isn't working 🙋🏻‍♂️help wanted Help from the community is appreciated labels Apr 8, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 8, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

The pull request updates CSS positioning logic in the calendar weekly view components. In the event component, truthiness checks for topOffsetMinutes are made explicit by using strict inequality (!== undefined) instead of loose truthy checks, allowing zero values to be valid offsets. In the grid component, the fallback CSS variable for marginTop is changed from var(--gridDefaultSize) to var(--calendar-offset-top) when offsetHeight is falsy. These changes refine how positioning and margin calculations are handled in calendar rendering.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the two main fixes: correcting time slot offset and clipped slots in weekly view, matching the core changes.
Linked Issues check ✅ Passed The PR directly addresses issue #14208 by fixing both reported problems: misaligned time slots and clipped end-hour slots through CSS positioning corrections.
Out of Scope Changes check ✅ Passed All changes are scoped to fixing the two layout bugs in weekly view components (Empty.tsx and index.tsx) with no unrelated modifications.
Description check ✅ Passed The pull request description clearly relates to the changeset, describing specific layout bug fixes in the weekly calendar view with concrete details about what was changed and why.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Akhilesh-Varute
Copy link
Copy Markdown
Author

Akhilesh-Varute commented Apr 8, 2026

Hi, could a maintainer please add the run-ci label so CI checks can run? Thanks!

romitg2
romitg2 reviewed Apr 8, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@romitg2 romitg2 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please add before/after image/video demo

@romitg2 romitg2 marked this pull request as draft April 8, 2026 06:37
@Akhilesh-Varute
Copy link
Copy Markdown
Author

Akhilesh-Varute commented Apr 8, 2026 •
edited
Loading

Before: 12:00am slot showing at 1:00am row (offset bug)

image

After: 1:00am slot perfectly aligned with 1:00am label

image

@Akhilesh-Varute Akhilesh-Varute requested a review from romitg2 April 9, 2026 09:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@romitg2 romitg2 Awaiting requested review from romitg2

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

booking-page area: booking page, public booking page, booker 🐛 bug Something isn't working 🙋🏻‍♂️help wanted Help from the community is appreciated Medium priority Created by Linear-GitHub Sync size/XS ui area: UI, frontend, button, form, input

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Weekly view time slots offset and content overflow clipped

4 participants

@Akhilesh-Varute @CLAassistant @romitg2 @akhil-ecc